<template>
  <div id="caigouDetail">
       <!--    导航栏 -->
         <van-nav-bar
            title="采购详情"
            left-arrow
            :fixed=true
            :border=true
            @click-left="$router.go(-1)"
         ></van-nav-bar>
          <van-cell-group style="margin-top:3rem;">
            <van-cell title="订单编号">
               <template>{{bianhao}}</template>
            </van-cell>
            <van-cell title="鲜活蔬菜送达时间" >
               <template>{{time}}</template>
            </van-cell>
            <van-cell title="可获得积分">
                 <template>{{jifen}}</template>
            </van-cell>
            <van-cell title="收货人">
                  <template>{{username}}</template>
            </van-cell>
             <van-cell title="鲜活投放柜编号">
                  <template>{{xhmimagui}}</template>
            </van-cell>
            <van-cell title="一般投放柜编号">
                  <template>{{ybmimagui}}</template>
            </van-cell>
            <van-cell title="收货人手机号码">
               <template>{{mobile}}</template>
            </van-cell>
             <van-collapse v-model="activeNames">
              <van-collapse-item title="采购清单" name="0">
                  <div style="width:20rem">
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:1.5rem" >序号</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:3rem">蔬菜名</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:1.5rem">数量</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:3rem">供应商</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:4rem">供应商手机号码</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:right;width:4rem">供应商地址</div>
                   </div>
                  <div style="margin-top:3rem;" v-for="(item,index) in list" :key="item.id">
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:1.5rem;height:3rem">{{item.xuhao}}</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:3rem;height:3rem">{{item.vname}}</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:1.5rem;height:3rem">{{item.num}}</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:3rem;height:3rem">{{item.gname}}</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:left;width:3rem;height:3rem">{{item.phone}}</div>
                       <div style="font-size:0.01rem;margin-right:0.5rem;float:right;width:3rem;height:3rem">{{item.dizhi}}</div>
                   </div>
              </van-collapse-item>
            </van-collapse>
          </van-cell-group>

          <van-button type="primary" size="large" @click="shenqing(bianhao)">申请采购</van-button>

  </div>
</template>

<script>
import { getCaigouDetail,shenqingCG } from './../../../../service/api/index.js'
import {mapState,mapMutations} from 'vuex'
 import {Toast,Panel,Cell,CellGroup,Dialog} from 'vant'
  export default{
     name:"XhGui",
     data(){
         return{
          activeNames: ['1'],
          time:'',
          bianhao:'',
          jifen:'',
          username:'',
          mobile:'',
           list:[],
           ybmimagui:'',
           xhmimagui:'',
         }
     },
      
      mounted(){
         console.log(this.$route);
         this.bianhao=this.$route.query.bianhao;
      },
      created(){
            // console.log(this.userInfo.uid);
                getCaigouDetail(this.$route.query.bianhao,this.$route.query.token).then((response)=>{
                   console.log(response);
                  if (response.success) {
                       this.time = response.servicetime.servicetime;
                       this.jifen = response.jifen.jifen;
                       this.username = response.res.username;
                       this.mobile = response.res.mobile;
                       this.list = response.data;
                       this.ybmimagui = response.ybmimagui;
                       this.xhmimagui = response.xhmimagui;
                  }
                }).catch(error=>{
                    // todo......
                    console.log(error);
               })   //---catch
        }, // ----created

      computed:{
          ...mapState(["userInfo"]),

     },
     methods:{
           async shenqing(bianhao){
                let res = await shenqingCG(bianhao,this.userInfo.token);
                console.log(res); 
                if (res.success==='true') {
                  console.log("fdaf");
                    Toast({
                        message:"申请成功，请等待审核",
                        duration:6000
                    });
                       this.$router.push({ name:'MyCaigouList'});
                }
              // console.log(bianhao);   
              //  console.log(this.userInfo.token);
            }
        },

          
}
</script>


<style lang="less" scoped>
     #caigouDetail{
      position:fixed;
      top:0;
      left:0;
      bottom:0;
      right:0;
      background-color:#f5f5f5;
      z-index:200;
      overflow-y: scroll;

     }


    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>